import React from 'react';
import {Icon, Button, Upload} from 'antd';
import PageTopFilter from '@components/page_top_filter/index.jsx';
import NoData from '@components/no_data/index.jsx';
import Tools from '@untils/tools.jsx';
import RCModal from '@components/modal/index.jsx';
import {APIS_GRACEFUL} from '@apis/index.js';
import Request from '@ajax/index.jsx';

import './scss/index.scss';

const _req = new Request();

class PartyGraceful extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            list: [],
            fileList: [],
            title: '',
            waringIpt: false,
            showAppendModal: false,
            pagination: false
        };
        this.setCallback = Tools.setCallback.bind(this);
    }

    componentDidMount() {
        this.requestNewsList()
    }

    requestNewsList() {
        let data = {
            pagination: {
                currentPage: 0,
                pageCount: 0,
                pageSize: 0
            },
            searchContent: {}
        };
        let options = Tools.objectAssign(APIS_GRACEFUL.NEWSLIST, {data})
        _req.axios(options).then(data => {

            let dataContent = data.content;

            let list = [];
            // 数据的处理
            dataContent.map(dataItem => {
                let arr = dataItem.gmtCreate.split('-'), ym = `${arr[0]}-${arr[1]}`, y = arr[0], index = -1;

                list.map((listItem, i) => {
                    if (listItem.year === y)
                        index = i;
                    return false
                });
                if (list[index]) {
                    let yearData = list[index].data, li = -1;
                    yearData.map((yearDataItem, j) => {
                        if (yearDataItem.month === ym)
                            li = j;
                        return false
                    });
                    if (yearData[li]) {
                        yearData[li].content.push(dataItem)
                    } else {
                        yearData.push({
                            month: ym,
                            content: [dataItem]
                        });
                    }
                } else {
                    list.push({
                        year: y,
                        data: [{month: ym, content: [dataItem]}]
                    });
                }
                return false
            });

            this.setCallback({list})
        })
    }

    handleChange = ({ fileList }) => this.setState({ fileList })

    iptChange(e) {
        let val = e.target.value.trim();
        this.setCallback({title: val, waringIpt: !val});
    }

    handleAppendBtn() {
        this.setCallback({showAppendModal: true});
    }

    // 添加
    appendNews() {
        let {title, fileList} = this.state;
        let pictures = fileList.map(item => item.response.content).join();
        let data = {
            title,
            pictures
        };
        let options = Tools.objectAssign(APIS_GRACEFUL.APPEND, {data});
        this.setCallback({
            fileList: [],
            title: '',
            waringIpt: false,
            showAppendModal: false,
        }, () => {
            _req.axios(options).then(res => this.requestNewsList())
        })
    }
    // 取消
    appendCancel() {
        this.setCallback({
            fileList: [],
            title: '',
            waringIpt: false,
            showAppendModal: false
        })
    }
    render() {
        let {
            list,
            fileList = [],
            title = '',
            waringIpt = false,
            showAppendModal = false
        } = this.state;

        let upLoadBtn = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">上传</div>
            </div>
        );
        return (
            <div className="party-graceful child-wrap">
                <div className="child-main-wrap">
                    <div className="child-main-content">
                        <PageTopFilter title="党建风采"/>
                        <div className="btn-line">
                            <Button
                                className='common-btn'
                                type="primary"
                                icon="plus"
                                onClick={() => this.handleAppendBtn()}
                            >发布</Button>
                        </div>
                        <div className="graceful-wrap">
                            <div className="graceful-content">

                                {
                                    list.length
                                    ? <ul className="news-list">
                                        {
                                            list.map((item, index) => {
                                                let yearDatas = item.data;
                                                return (
                                                    <li key={index} className="item-list">
                                                        <div className="left-year">
                                                            <span className="txt">{item.year}</span>
                                                            <span className="line"> </span>
                                                            <Icon type="clock-circle-o" className='year-icon' style={{ fontSize: '20px' }}/>
                                                        </div>
                                                        {
                                                            yearDatas.map((yearData, year) => {
                                                                let contents = yearData.content;
                                                                return (
                                                                    <div className="right-content" key={year}>
                                                                        <span className="line"> </span>
                                                                        <i className="dot"> </i>
                                                                        <p className="time"><span className="txt-2">{yearData.month}</span></p>
                                                                        {
                                                                            contents.map((content, day) => {
                                                                                let imgs = content.pictures.split(',');
                                                                                let title = content.gmtCreate.slice(0, 10) + ' ' + content.title;
                                                                                return (
                                                                                    <div key={day} className="news-content-wrap">
                                                                                        <p className="title">{title}</p>
                                                                                        <div className="imgs-content">
                                                                                            {
                                                                                                imgs.map((img, k) => {
                                                                                                    return <img src={img} alt={k} key={k} className="img-item"/>
                                                                                                })
                                                                                            }
                                                                                        </div>
                                                                                    </div>
                                                                                )
                                                                            })
                                                                        }
                                                                    </div>
                                                                )
                                                            })
                                                        }
                                                    </li>
                                                )
                                            })
                                        }
                                    </ul>
                                    :<NoData />
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <RCModal
                    title='党建风采'
                    width={640}
                    visible={showAppendModal}
                    disabled={!fileList.length||!title}
                    onOk={this.appendNews.bind(this)}
                    onCancel={this.appendCancel.bind(this)}
                >
                    <div className="append-news">
                        <div className="line-input">
                            <div className="txt-title"><span className='star-dot'>*</span>党员风采标题</div>
                            <div className={`right-ipt-area ${waringIpt ? 'warning' : ''}`}>
                                <p className="warning-txt">必填项</p>
                                <input
                                    type="text"
                                    className="news-title-ipt"
                                    value={title}
                                    onChange={(e) => this.iptChange(e)}
                                />
                            </div>
                        </div>
                        <div className="append-title"><span className='star-dot'>*</span>请选择上传图片 <span className="warning">最多上传9张</span></div>
                        <div className="upload-area">
                            <Upload
                                action={APIS_GRACEFUL.UPLOAD}
                                accept='image/*'
                                listType="picture-card"
                                fileList={fileList}
                                onChange={this.handleChange}
                            >
                                {fileList.length >= 9 ? null : upLoadBtn}
                            </Upload>
                        </div>
                    </div>
                </RCModal>
            </div>
        )
    }
}

export default PartyGraceful;